<%@ include file="/html/portlet/ext/registration/init.jsp" %>

<script src="/html/js/liferay/ext_service.js" type="text/javascript"></script>
<script src="/html/js/liferay/dynamic_select.js" type="text/javascript"></script>
<script src="/html/js/liferay/service.js" type="text/javascript"></script>
<script src="/html/js/mpire/mpire.js" type="text/javascript"></script>
<link rel ="stylesheet" type= "text/css" href="/html/portlet/css/profile.css" />

<%  
	int countryId=0;
	int regionId=0;
	int cityId=0;
	boolean gender=true;
	
	Calendar birthday = CalendarFactoryUtil.getCalendar();
	birthday.set(Calendar.MONTH, Calendar.JANUARY);
	birthday.set(Calendar.DATE, 1);
	birthday.set(Calendar.YEAR, 1970);
	
	Contact selContact = (Contact)request.getAttribute("user.selContact");
%>


<script type="text/javascript">

			function toggleBox(type) {
				var cityList = document.getElementById("cityList");
				var cityText = document.getElementById("cityText");
				var cityIdText = document.getElementById("cityIdText");
				
				if (type == 'text') {
					cityList.style.display = "none";
					cityText.style.display = "block";		
					cityIdText.focus();
				} else {
					cityIdText.value = "";
					cityList.style.display = "block";
					cityText.style.display = "none";
				}		
			}
			
			jQuery(
				function () {
				var isPageLoad = true;
					new Liferay.DynamicSelect(
						[
							{
								select: "countryId",
								selectId: "countryId",
								selectDesc: "name",
								selectVal: "<%= countryId %>",
								selectData: function(callback) {
									Liferay.Service.Portal.Country.getCountries(
										{
											active: true
										},
										
										function(data,status) {
											var myselect = document.getElementById("countryId");
											myselect.length = 0;				 
											try{		
												myselect.add(new Option("--Select--",""),myselect.options[0]);
											}
											catch(e) {
												myselect.add(new Option("--Select--", ""),0);
											} 
								
											for (var i = 1; i <= data.length; i++) {
												myselect.options[i] = new Option(data[i-1].name,i);
												myselect.options[i].value = data[i-1].countryId;
												
												if (data[i-1].countryId == '<%= countryId %>') {
													myselect.selectedIndex = i;
												}
											}
										}
									);
								}
							},
							{
								select: "regionId",
								selectId: "regionId",
								selectDesc: "name",
								selectVal: "<%= regionId %>",
								selectData: function(callback, selectKey) {
									Liferay.Service.Portal.Region.getRegions(
										{
											countryId: selectKey,
											active: true
										},
										
										function(data,status) {
											var myselect = document.getElementById("regionId");
											myselect.length = 0;	
														 
											try{		
												myselect.add(new Option("--Select--",""),myselect.options[0]);
											}
											catch(e) {
												myselect.add(new Option("--Select--", ""),0);
											} 
											for (var i = 1; i <= data.length; i++) {
												myselect.options[i] = new Option(data[i-1].name,i);
												myselect.options[i].value = data[i-1].regionId;
												
												if (data[i-1].regionId == '<%= regionId %>') {
													myselect.selectedIndex = i;
												}
											}
										}
									);
								}
							},
							{ 
								select: "cityId",
								selectId: "cityId",
								selectDesc: "name",
								selectVal: "<%= cityId %>",
								selectData: function(callback, selectKey) {
									Liferay.Service.Service.City.getCities(
										{
											regionId: selectKey
										
										},
										
										function(data,status) {
											if (!isPageLoad  && data.length == 0) {
												toggleBox('text');
											} else {
												isPageLoad = false;
												toggleBox('list');
												var myselect = document.getElementById("cityId");
												myselect.length = 0;		
														 
												try{		
													myselect.add(new Option("--Select--",""),myselect.options[0]);
												}
												catch(e) {
													myselect.add(new Option("--Select--", ""),0);
												} 
								
												for (var i = 1; i <= data.length; i++) {
													myselect.options[i] = new Option(data[i-1].name,i);
													myselect.options[i].value = data[i-1].cityId;
													
													if (data[i-1].cityId == '<%= cityId %>') {
														myselect.selectedIndex = i;
													}
												}
											}
										}
									);
								}
							}
						]
					);
				}
			);
		</script>

<portlet:actionURL var="addRegistrationURL">
       <portlet:param name="struts_action" value="/ext/registration/campusRegistration" />
       <portlet:param name="<%= Constants.CMD %>" value="addCollOthers" />                
</portlet:actionURL>

<liferay-ui:error exception="<%= DuplicateUserEmailAddressException.class %>" message="EmailAddress Already Exists " />
<liferay-ui:error exception="<%= DuplicateUserScreenNameException.class %>" message="user-name-already-taken" />
<liferay-ui:error exception="<%= ReservedUserScreenNameException.class %>" message="user-name-you-requested-is-reserved" />
<liferay-ui:error exception="<%= UserScreenNameException.class %>" message="please enter a valid User Name" />
		

<form action="<%= addRegistrationURL.toString() %>" method="POST" name="<portlet:namespace />fm"> 

<center>
	<table width='100%' class='portlet-box' style='border:1px solid LightSteelBlue;' align='center' cellspacing="0" cellpadding="2">
		<tr class='results-header'>
		<td class='portlet-font' colspan='3' style='font-weight:bold;height:25px' nowrap>
		<liferay-ui:message key="this-is-other-registration-form" /> 
		</td>
		<tr class = "portlet-section-body results-row alt">
		<td><liferay-ui:message key="first-name" /><font color="red" style = "font-size: medium;">*</font></td>
		<td><input type="text" name="<portlet:namespace />firstName" value="<%= ParamUtil.getString(request,"firstName") %>" /></td>
		</tr>
		<tr class = "portlet-section-body results-row">
		<td><liferay-ui:message key="middle-name" /></td>
		<td><input type="text" name="<portlet:namespace />middleName" value="<%= ParamUtil.getString(request,"middleName") %>"/></td>
		</tr>
		<tr class = "portlet-section-body results-row alt">
		<td><liferay-ui:message key="last-name" /><font color="red" style = "font-size: medium;">*</font></td>
		<td><input type="text" name="<portlet:namespace />lastName" value="<%= ParamUtil.getString(request,"lastName") %>" /></td>
		</tr>
		<tr class = "portlet-section-body results-row">
		<td><liferay-ui:message key="gender" /><font color="red" style = "font-size: medium;">*</font></td>
		<td><input type="radio" name="gender" value=1 <%= gender? "checked" : "" %>/><liferay-ui:message key="male" />
		<input type="radio" name="<portlet:namespace />gender" value=0 <%= !gender? "checked" : "" %>/><liferay-ui:message key="female" /></td>
		</tr>
		<tr class = "portlet-section-body results-row alt">
			<td><liferay-ui:message key="birthday" /><font color="red" style = "font-size: medium;">*</font></td>
			<td>
				<c:choose>
					<c:when test="<%= true %>">
						<liferay-ui:input-field model="<%= Contact.class %>" bean="<%= selContact %>" field="birthday" defaultValue="<%= birthday %>" />
					</c:when>
					<c:otherwise>
						<input name="<portlet:namespace />birthdayMonth" type="hidden" value="<%= Calendar.JANUARY %>" />
						<input name="<portlet:namespace />birthdayDay" type="hidden" value="1" />
						<input name="<portlet:namespace />birthdayYear" type="hidden" value="1970" />
					</c:otherwise>
				</c:choose>
			</td>
		</tr>
		<tr class = "portlet-section-body results-row">		
		<td><liferay-ui:message key="email-id" /><font color="red" style = "font-size: medium;">*</font></td>
		<td><input type="text" name="<portlet:namespace />emailId" value="<%= ParamUtil.getString(request,"emailId") %>" /></td>
		</tr>
		<tr class = "portlet-section-body results-row alt">
			<td><liferay-ui:message key="job-title" /></td>
			<td><input type="text" name="<portlet:namespace />jobTitle" value="<%= ParamUtil.getString(request,"jobTitle") %>" /></td>
		</tr>
		<tr class = "portlet-section-body results-row">
		<td><liferay-ui:message key="street-address1" /><font color="red" style = "font-size: medium;">*</font></td>
		<td><input type="text" name="<portlet:namespace />street1" value="<%= ParamUtil.getString(request,"street1") %>" /></td>
		</tr>
		<tr class = "portlet-section-body results-row alt">
		<td><liferay-ui:message key="street-address2" /></td>
		<td><input type="text" name="street2" value="<%= ParamUtil.getString(request,"street2") %>" /></td>
		</tr>
		<tr class = "portlet-section-body results-row">
		<td><liferay-ui:message key="street-address3" /></td>
		<td><input type="text" name="street3" value="<%= ParamUtil.getString(request,"street3") %>" /></td>
		</tr>
		<tr class = "portlet-section-body results-row alt">
		<td><liferay-ui:message key="country" /><font color="red" style = "font-size: medium;">*</font></td>
		<td><select id="countryId" name="<portlet:namespace />countryId"></select></td>
		</tr>
		<tr class = "portlet-section-body results-row">
		<td><liferay-ui:message key="state" /><font color="red" style = "font-size: medium;">*</font></td>
		<td><select id="regionId" name="<portlet:namespace />regionId"></select></td>
		</tr>
		<tr class = "portlet-section-body results-row alt">
		<td><liferay-ui:message key="city" /><font color="red" style = "font-size: medium;">*</font></td>
		<td>
			<div id="cityList">
				<select id="cityId" name="<portlet:namespace />cityId"></select>
			</div>
			
			<div id="cityText" style="display:none">
				<input type="text" id="cityIdText" name="cityIdText" style="width:150px" maxlength="40" />	
			</div>
		</td>
		</tr>
		<tr class = "portlet-section-body results-row">
		<td><liferay-ui:message key="pin-code" /><font color="red" style = "font-size: medium;">*</font></td>
		<td><input type="text" name="<portlet:namespace />pinCode" value="<%= ParamUtil.getString(request,"pinCode") %>" onkeypress="return checkInt(event)" /></td>
		</tr>
		<tr class = "portlet-section-body results-row alt">
		<td><liferay-ui:message key="contact-no" /><font color="red" style = "font-size: medium;">*</font></td>
		<td><input type="text" name="<portlet:namespace />contactNo" value="<%= ParamUtil.getString(request,"contactNo") %>" onkeypress="return checkInt(event)"/></td>
		</tr>
		
		<tr class = "portlet-section-body results-row">
		<td><liferay-ui:message key="how-did-you-know-about-this-site" /></td>
		<td><textarea name="<portlet:namespace />howUKnow" rows="5" cols="25"></textarea></td>
		</tr>
		<tr>
		<tr class='results-header'>
			<td><liferay-ui:message key="login-details" /></td>
			<td></td>
		</tr>
		<tr class = "portlet-section-body results-row alt">
			<td><liferay-ui:message key="choose-user-name" /><font color="red" style = "font-size: medium;">*</font></td>
			<td><input type="text" name="<portlet:namespace />loginName" value="<%= ParamUtil.getString(request,"loginName") %>" /></td>
		</tr>
	</table>  
	<br>
	
	<table align='center'>
		<tr class="portlet-form-button">	
			<td>
				<input type="submit" value="<liferay-ui:message key="submit" />" onClick="return collOthersvalidate()" />
				<input type="reset" value="<liferay-ui:message key="reset" />" />
				<input type="button"  value='<liferay-ui:message key="cancel" />' onClick='history.go(-1)'>
			</td>
		</tr>
	</table>
  </center>
</form>